<template>
  <li class="list-group-item" @click="$emit('addTag', {tagId, tagName})" :class="{'disabled': selected}">
    <span>{{tagName}}</span>
    <span style="float: right;">
      <span @click.stop="$emit('prepareCreateTag', {tagId, tagName})" class="tag-ops" title="创建子标签">
        <img src="../../../static/img/add-tag.svg" alt="">
      </span>
      <span @click.stop="$emit('renameTag', {tagId, tagName})" class="tag-ops" title="重命名">
        <img src="../../../static/img/pencil-square.svg" alt="">
      </span>
      <span @click.stop="$emit('deleteTag', {tagId, tagName})" class="tag-ops" title="删除">
        <img src="../../../static/img/delete.svg" alt="">
      </span>


    </span>
  </li>
</template>

<script>
  export default {
    name: 'TagSearchItem',
    props: ['tagId', 'tagName', 'selected'],
  }
</script>

<style>
  .tag-ops {
    margin-left: 5px;
    cursor: pointer;
  }
</style>
